<template>
    <div>
        <el-table v-loading="loading" :data="data.list" border style="width: 100%" align="center">
            <el-table-column prop="id" label="编号" width="60" align="center" />
            <el-table-column prop="name" label="角色名称" align="center" />
            <el-table-column prop="description" label="描述" align="center" />
            <el-table-column prop="email" label="用户数" align="center" />
            <el-table-column label="添加时时间" align="center">
                <template #default="{ row }">
                    {{ fromtime(row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column type="index" label="是否启用" min-width="100" width="100" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="140">
                <div class="operation">
                    <el-button type="primary" link>分配资源
                    </el-button>
                </div>
            </el-table-column>
        </el-table>
            <div class="demo-pagination-block">
                <el-pagination v-model:currentPage="data.pageNum" v-model:page-size="data.pageSize"
                    :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { getRoleListAPI } from '../../request/api'

let loading = ref(false)

const data: IDate = reactive({
    list: [],
    // 当前页数
    pageNum: 1,
    // 一页多少个
    pageSize: 10,
    total: 0,
})

const roleList = (pageNum: number, pageSize: number) => {
    try {
        loading.value = true
        getRoleListAPI({
            pageNum,
            pageSize,
        }).then((res) => {
            // console.log(res);
            data.list = res.data.list
            data.pageNum = res.data.pageNum
            data.pageSize = res.data.pageSize
            data.total = res.data.total
        })
    } finally {
        loading.value = false
    }
}
roleList(data.pageNum, data.pageSize)
// 页面一页多少个 发生改变
const handleSizeChange = (val: number) => {
    data.pageSize = val

}
//  当前页数 发生改变
const handleCurrentChange = (val: number) => {
    data.pageNum = val

}

// 解析时间
function fromtime(date: string) {
    if (date !== null) {
        let d = new Date(date);
        let month =
            d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
            d.getFullYear() +
            "-" +
            month +
            "-" +
            day +
            " " +
            hours +
            ":" +
            min +
            ":" +
            sec;
        return times;
    }
}

type IDate = {
    list: {
        adminCount: number;
        createTime: string;
        description: string;
        id: number;
        name: string;
        sort: number;
        status: number;
    }[],
    pageNum: number,
    pageSize: number,
    total: number,
}

</script>
<style lang = "less" scoped>
:deep(.demo-pagination-block) {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
}
</style>